<!-- 角色管理--授权 -->
<template>
    <div class="reminder-dialog">
        <el-dialog
                title="授权"
                :visible.sync="dialogVisible"
                width="50%"
                @open="open"
                @close="close">
            <el-tree
                    ref="tree"
                    :data="menus"
                    show-checkbox
                    node-key="id"
                    :props="props"
                    default-expand-all
                    :default-checked-keys="checkedKeys"
                    :expand-on-click-node="false">
                <div class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ node.label }}</span>
                </div>
            </el-tree>
            <span slot="footer" class="dialog-footer operation submit-btn">
                <el-button type="info" size="small" @click="handleCancel">取消</el-button>
                <el-button type="primary" size="small" @click="handleConfirm">授权</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import { Vue, Component, Prop } from 'vue-property-decorator';
    @Component()
    export default class AuthDialog extends Vue {
        dialogVisible: boolean = false
        menus = []
        // checkedKeys = []
        props = {
            children: 'menuDtos',
            label: 'name'
        }
        @Prop({
            default: ''
        }) currentID: string
        @Prop() checkedKeys: any;
        showDialog () {
            this.dialogVisible = true
        }

        hiddenDialog () {
            this.dialogVisible = false
        }
        // 授权
        async handleConfirm () {
            let menus = this.$refs.tree.getCheckedNodes().map(val => val.id)
            this.menus.forEach(menu => {
                menu.menuDtos.forEach(dto => {
                    if (menus.indexOf(dto.id) !== -1) {
                        menus.push(menu.id)
                    }
                })
            })
            menus =  Array.from(new Set(menus).values())
            menus = menus.map(v => ({menuId: v}))
            let res = await this.$http.post('rolemenu/add', {
                roleId: this.currentID,
                menus
            })
            this.hiddenDialog()
        }

        async getAllRoles () {
            let res = await this.$http.get('menu/menus')
            if (res.status == 200) {
                this.menus = res.data;
            }
        }
        handleCancel () {
            this.hiddenDialog()
        }
        open () {
            this.getAllRoles()
        }

        close () {
            // this.checkedKeys = null
            this.menus = null
        }
        mounted () {

        }
    }
</script>

<style lang="scss" scoped>
    .operation {
        display: flex;
        justify-content: center;
    }
</style>